<template>
  <div class="header">
    <!-- 登陆栏star -->
    <div class="nav-topbar">
      <div class="container">
        <div class="topbar-menu">
          <a href="https://www.dji.com"> Dji 大疆官网</a>
          <p>满 ¥99 顺丰包邮。下单即享 1% DJI币返点。</p>
        </div>
        <div class="tobar-uesr">
          <h1 @click="gotoCartPage">
            <i class="iconfont">&#xe69e;</i>
            购物车
            <span>0</span>
          </h1>
          <p></p>
          <h1 v-if="isLogin == false" @click="goToLoginPage">登录</h1>
          <h1 v-else @click="goToOrderPage">我的订单</h1>
          <p></p>
          <h1 href="">注册</h1>
        </div>
      </div>
    </div>
    <!-- 登陆栏end -->
    <!-- 菜单栏star -->
    <div class="nav-head">
      <div class="container">
        <div class="head-logo">
          <img src="../../../public/images/logo.jpg" alt="" />
          <p @click="$router.push('/index')">商城</p>
        </div>
        <div class="head-memu">
          <!-- 二级菜单 -->
          <div class="xiala">
            <h5>商品分类</h5>
            <!-- 下拉菜单 -->
            <div class="nav-head-children">
              <div
                class="children-box"
                v-for="item in googsList"
                :key="item.id"
              >
                <div class="children-left">
                  {{ item.name }}
                </div>
                <div class="children-right">
                  <div
                    class="goodsitem"
                    v-for="item in item.s_goods"
                    :key="item.id"
                    @click="goTOUrl(item.id)"
                  >
                    <p>{{ item.name }}</p>
                    <img :src="item.s_goods_photos[0].path" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="">以旧换新</a>
          <a href="">购机指南</a>
          <a href="">DJi大疆商城APP</a>
        </div>
        <div class="head-search">
          <input type="text" placeholder="搜索商品" />
          <i class="iconfont">&#xe612;</i>
        </div>
      </div>
    </div>

    <!-- 菜单栏end -->
    <!-- 产品栏star -->
    <div class="product-list" v-if="isShowHeadList">
      <ul>
        <li
          v-for="item in productList"
          :key="item.id"
          @click="goTOShowPage(item.path)"
        >
          <img :src="item.picName" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 产品栏end -->
  </div>
</template>

<script>
// 映射推荐使用
import { mapState } from "vuex";
import { classifyGoods } from "@/assets/tool/request.js";
export default {
  props: {
    isShowHeadList: {
      defualt: true,
    },
  },
  data() {
    return {
      picPath: "./assets/picpath/images/list/",
      // 这里需要主义的时src绑定的时候 设置绝对路径或者是相对路径时应该使用require引入才能成功
      productList: [
        {
          name: "御 Mavi",
          picName: require("@/assets/picpath/mavic2.png"),
          id: 1001,
          path: "/Mavic-series",
        },
        {
          name: "灵眸 osmo",
          picName: require("@/assets/picpath/linmao2.png"),
          id: 1002,
          path: "/Osmo-series",
        },
        {
          name: "DJI FPV",
          picName: require("@/assets/picpath/fpv.png"),
          id: 1003,
          path: "/FPV-series",
        },
        {
          name: "精灵 Phantom",
          picName: require("@/assets/picpath/jinlin.png"),
          id: 1004,
          path: "/Mavic-series",
        },
        {
          name: "如影 ROnin",
          picName: require("@/assets/picpath/tuying.png"),
          id: 1005,
          path: "/Ronin-series",
        },
        {
          name: "机甲大师",
          picName: require("@/assets/picpath/jijia.png"),
          id: 1006,
          path: "/Mavic-series",
        },
        {
          name: "悟 Inspire",
          picName: require("@/assets/picpath/wu.png"),
          id: 1007,
          path: "/Mavic-series",
        },
        {
          name: "行业应用",
          picName: require("@/assets/picpath/keji.png"),
          id: 1008,
          path: "/Mavic-series",
        },
        {
          name: "睿炽科技",
          picName: require("@/assets/picpath/keji.png"),
          id: 1009,
          path: "/Mavic-series",
        },
        {
          name: "增值服务",
          picName: require("@/assets/picpath/wangdun.png"),
          id: 1010,
          path: "/Mavic-series",
        },
        {
          name: "创意周边",
          picName: require("@/assets/picpath/other.png"),
          id: 1011,
          path: "/Mavic-series",
        },
      ],
      googsList: [],
    };
  },
  computed: {
    ...mapState("user", ["isLogin"]),
  },
  methods: {
    // 跳转函数
    goTOShowPage(path) {
      this.$router.push(path);
    },

    // 跳转到prodcutpage
    goTOUrl(id) {
      this.$router.push(`/product/${id}`);
    },

    //跳转登录页面
    goToLoginPage() {
      this.$router.push(`/login`);
    },

    //跳转订单页面
    goToOrderPage(){
       this.$router.push(`/orderlist`);
    },

    //跳转到购物车也米娜
    gotoCartPage(){
        this.$router.push(`/cart`);
    },


  },
  // 这里是获取所有分类商品
  async created() {
    let res = await classifyGoods({ project_id: 104 });
    this.googsList = res.data.result;
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/iconfont.css";
.header {
  background-color: #fff;
  // 登录栏目样式
  .nav-topbar {
    font-size: 12px;
    background-color: #f7f9fa;
    .container {
      height: 40px;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .topbar-menu {
        p {
          font-size: 10px;
          display: inline-block;
          font-size: 100%;
          color: #6c7073;
        }
        a {
          margin: 8px;
          margin-right: 24px;
          color: #6c7073;
        }
      }
      .tobar-uesr {
        display: flex;
        align-items: center;
        h1 {
          font-size: 12px;
          color: #6c7073;
          margin: 0 10px;
        }
        p {
          // display:inline-block;
          width: 1px;
          height: 20px;
          background-color: grey;
        }
        i {
          line-height: 100%;
        }
      }
    }
  }
  //菜单栏样式
  .nav-head {
    border-bottom: 1px solid #eee;
    position: relative;
    .container {
      width: 1200px;
      font-size: 16px;
      display: flex;
      height: 64px;
      line-height: 64px;
      margin: 0 auto;
      // line-height: 64px;
      justify-content: space-between;
      align-items: center;
    }
    .head-logo {
      p {
        color: #3b3e40;
        display: inline-block;
        font-weight: 530;
        font-size: 20px;
      }
      img {
        width: 60px;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .head-memu {
      display: flex;
      margin-left: -270px;
      a {
        font-size: 14px;
        color: #3b3e40;
        margin-right: 30px;
      }
      .xiala {
        // 箭头
        //商品列表
        h5 {
          &::after {
            content: "";
            display: inline-block;
            height: 5px;
            width: 5px;
            // background-color: pink;
            margin: 0 30px 0 10px;
            transform: rotate(45deg) translate(0, -5px);
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
          }
        }
      }
    }
  }
  // 搜索框样式
  .head-search {
    position: relative;
    input {
      width: 202px;
      height: 23px;
      padding: 12px 64px 12px 16px;
      font-size: 14px;
      &::placeholder {
        color: #999;
        font-size: 14px;
      }
    }
    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      margin-right: 20px;
    }
  }
  .nav-head-children {
    width: 100vw;
    height: 0px;
    background-color: #fff;
    left: 0px;
    top: 65px;
    position: absolute;
    z-index: 10;
    overflow: hidden;
    transition: all 0.5s;
    .children-box {
      // position: relative;
      display: flex;
      width: 1200px;
      // background-color: pink;
      margin: 0 auto;
      padding-top: 10px;
      .children-left {
        padding-left: 160px;
        font-size: 16px;
        width: 200px;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &::after {
          content: "";
          display: inline-block;
          height: 5px;
          width: 5px;
          margin: 0 30px 0 10px;
          transform: rotate(-45deg);
          border-bottom: 1px solid gray;
          border-right: 1px solid gray;
        }
      }
      .children-right {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        // display: none;
        background-color: #fff;
        left: 35%;
        top: 10px;
        text-align: center;
        width: 550px;
        padding: 0 15px;
        transition: all 0.5s;
        .goodsitem {
          width: 150px;
          margin-right: 30px;
          img {
            width: 100px;
          }
          p {
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
}

// 改变默hover样式 下拉列表
.children-box:hover {
  .children-left {
    color: rgb(144, 192, 255);
  }
  .children-right {
    // display: block;
    // opacity: 1;
    z-index: 12 !important;
    // display: flex !important ;
    // flex-wrap: wrap;
  }
}

.xiala:hover {
  cursor: pointer;
  .nav-head-children {
    height: 300px;
  }
}

//默认选择第一个
.nav-head-children {
  .children-box:first-child {
    .children-right {
      z-index: 11;
    }
  }
}

//产品栏样式
.product-list {
  ul {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      padding-top: 16px;
      padding-bottom: 15px;
      // margin: 0 auto;
      box-sizing: border-box;
      flex: 1;
      text-align: center;
      &:hover {
        cursor: pointer;
        p {
          color: rgb(144, 192, 255);
        }
      }
      img {
        margin: 0 auto;
        height: 56px;
      }
      p {
        text-align: center;
        line-height: 22px;
        font-family: Microsoft Yahei;
        font-size: 12px;
      }
    }
  }
}
</style>